<template>
  <div>
    <div class="title">
        热销推荐
    </div>
    <ul>
      <router-link :to="'/detail/' + item.id" tag="li" class="item border-bottom" v-for="item of list" :key="item.id">
            <img :src="item.imgUrl" class="item-img">
            <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{item.desc}}</p>
                <button class="item-button">查看详情</button>
            </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
    div{
        font-size: 14px
    }
    .title
      margin-top: .2rem
      line-height .8rem
      background: #eee
      text-indent: .2rem
    .item
      overflow hidden
      display flex
      height: 1.9rem
      .item-img
        width: 1.7rem
        height: 1.7rem
        padding .1rem
      .item-info
        flex: 1
        padding: 0.1rem
        min-width: 0
        .item-title
          line-height .54rem
          font-size: .32rem
          ellipsis()
        .item-desc
          line-height .4rem
          color: #ccc
          ellipsis()
        .item-button
          line-height .06 rem
          margin-top .16rem
          color #fff
          background #ff9300
          padding 0.2rem
          border-radius: .06rem
</style>
